<template>
  <div class="departmentStatistical">
    <span>统计部门：</span>
    <div class="labelCheckList">
      <button v-for="(key, item) in departmentList" :class="lastClickLabel == key ? 'active': ''"  v-on:click="departmentCheckList(key, event,item.dept_id)">
        {{ item.dept_name }}
      </button>
    </div>
  </div>
</template>

<script>
import { changeKind } from '../vuex/action'
import BS from '../dataManage'
export default {
  data () {
    return {
      departmentList:'',
      lastClickLabel:''
    }
  },
  vuex: {
    actions: {
      changeKind: changeKind
    }
  },
  props:{
    filiterUrl:{
      type:String
    }
  },
  methods: {
    departmentCheckList: function(elName, event,kind) {
      this.lastClickLabel = elName;
      this.changeKind(kind)
    }
  },
  ready(){
    this.lastClickLabel = "0";
    BS.getDeptmentFilter(this,this.filiterUrl);
  }
}
</script>

<style scoped>

div.departmentStatistical {
  clear: both;
  margin-bottom: 8px;
}
div.timeStatistical {
  position: relative;
  top: 20px;
}
div.departmentStatistical span{
  display: table-cell;
  font-size: 14px;
  color: #767E85; 
  vertical-align: 3px;
  width: 70px;
}
div.departmentStatistical .labelCheckList {
  display: table-cell;
}
div.departmentStatistical button {
    outline:none;
    margin-left: 8px;
    font: -webkit-mini-control;
    height: 26px;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 8px;
    border-radius: 13px;
    min-width: 80px;
    color: #666;
    background-color: #fff;
    margin-bottom: 8px;
}
div.departmentStatistical button.active {
    color: #fff;
    background-color: #2ACDCF;
}
</style>
